import {
  Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, Renderer, ViewChild,
  ViewEncapsulation
} from '@angular/core';
import {ToolsService} from "../../service/tools/tools.service";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {ValidationService} from "../../service/validator/validator.service";

@Component({
  selector: 'seed-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ContactFormComponent implements OnInit {

  public contactObj: any = {
    sponsorId: '',
    orgId: '',
    companyName: '',
    contactPerson: '',
    contactPhone: '',
    purposeDesc: '',
    sponsorType: ''
  };
  customForm: FormGroup;
  public companyCheck = false;
  public nameCheck = false;
  public phoneCheck = false;
  public requestInfo = false;
  public height: any;
  @Input() sponsorId: any;
  @Input() orgId: any;
  @Input() sponsorType: any;
  @Output() submitUp = new EventEmitter();
  @Output() closePage = new EventEmitter();
  @ViewChild('btnWrap') btnWrap: ElementRef;

  constructor(public toolsService: ToolsService,
              public formBuilder: FormBuilder,
              private renderer: Renderer
  ) {
    this.customForm = this.formBuilder.group({
      'company': ['', [Validators.required, Validators.minLength(4), Validators.maxLength(80)]],
      'contactPerson': ['', [Validators.required, Validators.minLength(2), Validators.maxLength(40)]],
      'contactPhones': ['', ValidationService.accountValidator],
      'introduce': ['', [Validators.required, Validators.minLength(10), Validators.maxLength(1000)]]
    });
  }

  ngOnInit() {
    this.height = document.documentElement.clientHeight + 'px';
    this.contactObj.sponsorId = this.sponsorId;
    this.contactObj.orgId = this.orgId;
    this.contactObj.sponsorType = this.sponsorType;
  }

  @HostListener('window:resize', ['$event'])
  resize(event) {
    const h = this.height.slice(0, -2);
    if (event.target.innerHeight < Number(h)) {
      this.renderer.setElementStyle(this.btnWrap.nativeElement, 'display', 'none');
    } else {
      this.renderer.setElementStyle(this.btnWrap.nativeElement, 'display', 'block');
    }
  }

  close() {
    this.closePage.emit();
  }

  onSubmit(value) {
    if (value.valid) {
      this.submitUp.emit();
      this.closePage.emit();
    }
  }

  CheckCompany() {
    this.companyCheck = false;
    if (this.customForm.controls['company'].errors) {
      this.companyCheck = true;
    }
  }

  CheckName() {
    this.nameCheck = false;
    if (this.customForm.controls['contactPerson'].errors) {
      this.nameCheck = true;
    }
  }

  CheckPhone() {
    this.phoneCheck = false;
    if (this.customForm.controls['contactPhones'].errors) {
      this.phoneCheck = true;
    }
  }

  CheckIntroduce() {
    this.requestInfo = false;
    if (this.customForm.controls['introduce'].errors) {
      this.requestInfo = true;
    }
  }

  ConpanyFocus() {
    this.companyCheck = false;
  }

  NameFocus() {
    this.nameCheck = false;
  }

  PhoneFocus() {
    this.phoneCheck = false;
  }

  IntroduceFocus() {
    this.requestInfo = false;
  }
}
